<template>
  <div class="commonHead">
    <div class="headLeft">
      <div class="imgBox">
        <img src="@/assets/img/diLogo.png" alt="">
        <img src="@/assets/img/TEClogo@2x.png" alt="">
        <img src="@/assets/img/muLogo.png" alt="">
      </div>
      <div class="linkBox">
        <div class="linkItem linkColorBox">
          <span>{{title}}</span>
          <span>站位号:{{userData.stationNum}}</span>
        </div>
        <div class="linkItem">
          <span>用户:</span>
          <span>{{userData.workerName}}</span>
        </div>
        <div class="linkItem">
          <span>工号:</span>
          <span>{{userData.jobNumber}}</span>
        </div>
        <div class="linkItem">
          <span>小组:</span>
          <span>{{userData.groupName}}</span>
        </div>
      </div>
    </div>
    <div class="headRight">
      <slot></slot>
      <div class="linkItem loginOut" @click="toLogin">
        <van-icon class="cross" name="cross" />
      </div>
    </div>
  </div>
</template>

<script>
import { loginOutApi } from '@/api/loginApi'
import { Dialog } from 'vant'
export default {
  props:{
    title: {
      default: '车缝站位',
      type: String
    },
    userData:{
      default(){
        return{
          stationNum:'',
          workerName:'张三',
          jobNumber:'',
          groupName: ''
        }
      },
      type: Object
    }
  },
  data() {
    return{
      loginMsg:{}
    }
  },
  methods:{
    toLogin(){
      Dialog.confirm({
        title: '提示',
        message: '确认要退出吗?',
        confirmButtonColor: '#1989fa',
      })
        .then(() => {
          let positionIndex = localStorage.getItem('positionIndex')
          if(positionIndex == 0){
            this.loginMsg = JSON.parse(localStorage.getItem('loginMsg'))
          }else{
            this.loginMsg = JSON.parse(localStorage.getItem('loginMsgPare'))
          }
          loginOutApi({lineNumber:this.loginMsg.lineNumber,stationNum: this.loginMsg.stationNum}).then(res =>{
            if(res.data.code == 0){
              this.$emit('loginOut')
              this.$router.push('/login')
            }else{
              this.$emit('loginOut')
              this.$router.push('/login')
            }
          }).catch(() =>{
            this.$emit('loginOut')
            this.$router.push('/login')
          })
        })
        .catch(() => {
          // on cancel
          //  this.$router.push('/login')
        });
      
    }
  }
}
</script>

<style lang="less" scoped>
  .commonHead{
    background: #fff;
    padding: 0 0px 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    .headLeft{
      height: 70px;
      display: flex;
      align-items: center;
      .imgBox{
        margin-right: 20px;
        img{
          height: 35px;
        }
        img:nth-child(2){
          margin: 0 8px 0 3px;
        }
      }
      .linkBox{
        display: flex;
        align-items: center;
        height: 100%;
        .linkItem{
          display: flex;
          align-items: center;
          // margin-right: 20px;
          height: 100%;
          width: 110px;
          // border: 1px solid #000;
          position: relative;
          z-index: 10;
          justify-content: center;
          img{
            width: 25px;
            margin-right: 5px;
          }
          &::before{
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            // background: #58a;
            transform: skewX(15deg);
            // border-right: 1px solid #eee;
            border-left: 1px solid #eee;
          }
          &:last-child::before{
            border-right: 0;
          }
          &:first-child{
            width: 145px;
          }
          &:last-child{
            width: 165px;
          }
        }
        .linkColorBox{
          display: flex;
          flex-direction: column;
          font-size: 14px;
          span:first-child{
            background: #007DBC;
            color: #fff;
            padding: 5px;
            width: 103px;
            text-align: center;
            box-sizing: border-box;
          }
          span:last-child{
            background: #ECEFF1;
            padding: 5px 5px;
            width: 103px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
          }
        }
      }
    }
    .headRight{
      display: flex;
      height: 70px;
      .loginOut{
          height: 70px;
          width: 100px;
          background-image: url('../assets/img/redBgc.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .cross{
            font-size: 40px;
            color: #fff;
            position: relative;
            right: -5px;
          }
        }
    }
  }
</style>

